<%--
  Created by IntelliJ IDEA.
  User: My
  Date: 2021/11/16
  Time: 22:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <style>
        *{
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }
        .parent{
            width: 90%;
            height: 85%;
            /* border:1px solid #adadad; */
            /* div上下0 左右自动居中*/
            margin:0 auto;
            position: relative;
        }

        .left{
            width: 15%;
            position: fixed;
            top:12%;
            left: 4%;

        }
        .left >div{
            width: 95%;


            margin:0 auto 8px;
            border-radius: 5px;
            background-image: linear-gradient(to right,#86d7fd,#61cdff);
            box-shadow: 2px 2px 1px #e1e2e3;
            text-align: center;
            line-height: 30px;
        }
        .left >div:hover{
            background-image: linear-gradient(to right,#6bcffd,#47c3fd);
        }
        .right{
            margin: auto;
            width: 66%;
            border-top-left-radius:20px;
            border-bottom-right-radius: 20px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .right_module{
            width: 40%;
            height: 130px;
            display: flex;
            margin-top: 45px;
            background-color:#f8f8f9;
            border-radius:5px;
            float: left;
        }

        .right_box div{
            float: left;
        }
        .img-box{
            margin-left: 15px;
            margin-top: 25px;
        }
        .detail-box{
            margin-left: 15px;
            margin-top: 10px;
        }

        /*轮播图样式*/
        .ppt {
            /*自定义css变量*/
            --width: 800px;
            --height: 280px;
            margin: auto;
            width: var(--width);
            height: var(--height);
            position: relative;
            overflow: hidden;
        }

        ul,
        li {
            list-style-type: none;
        }

        .ppt ul {
            position: absolute;
            width: calc(var(--width) * 500);
            height: var(--height);
            top: 0;
            left: 0;
        }

        .ppt li {
            float: left;
        }

        .ppt ul li img {
            border: 0;
            width: var(--width);
            height: var(--height);
            object-fit: cover;
        }

        .select-dots {
            position: absolute;
            bottom: 10px;
            left: 0;
            z-index: 10;
            /*flex布局上下左右居中对齐*/
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
        /*
        四个人轮播图下标圆点
         */
        .dot {
            width: 15px;
            height: 15px;
            background-color: #e1e3e2;
            cursor: pointer;

            border-radius: 50%;
            margin:0 2px;
        }

        .prev,
        .next {
            position: absolute;
            top: 0;
            width: 100px;
            height: var(--height);
            background-color: rgba(255, 255, 255, 0.3);
            color: rgba(255, 255, 255, .6);
            text-align: center;
            line-height: var(--height);
            font-size: 6rem;
            opacity: 0.5;
            z-index: 1;
        }

        .prev {
            left: 0;
        }

        .next {
            right: 0;
        }

        .dot.red {
            background-color: #999999;
        }

        .dot:hover {
            background-color: #999999;
        }

        .prev:hover,
        .next:hover {
            opacity: 1;
            cursor: pointer;
        }
        /*
        退出
         */
        .logout{
            display: block;
            text-decoration: none;
            color: #333;
            position: fixed;
            top: 2%;
            right: 5%;
            background: #e1e2e3;
            box-shadow: 1px 1px 1px rgb(191, 188, 188);
            padding: 2px 4px;
            border-radius: 3px;
        }
        .logout:hover{
            box-shadow: 1px 1px 1px rgb(146, 142, 142);
            background-color: #b9bbbe;
        }
    </style>
</head>

<body>

<div class="parent">
    <H1 align="center" style="line-height: 3em;">基于讯飞开放平台人脸特征识别</H1>
    <a href="loginOut" class="logout">退出</a>
    <div class="ppt">
        <ul>
            <li>
                <a href="#"><img src="./images/1.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="./images/2.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="./images/3.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="./images/4.jpg"></a>
            </li>
        </ul>
        <div class="select-dots">
            <div class="dot red"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>

        <div class="prev">&#x2039;</div>
        <div class="next">&#x203a;</div>
    </div>
    <div class="left">
        <div class="home"><a>首页</a></div>
        <div class="face_menu" id="test">
            <div class="home"><a>人脸识别</a></div>
            <div id="face_menu" style="display: none;">
                <ul>
                    <li style="line-height: 30px;"><a href="face.jsp">人脸特征分析</a></li>
                    <li style="line-height: 30px;"><a href="db.jsp">人脸对比</a></li>
                </ul>
            </div>
        </div>
        <div class="home"><a href="DateView.jsp"><a href="page">个人中心</a></a></div>
    </div>
    <div class="right">
        <div class="right_module">
            <div class="right_box">
                <div class="img-box">
                    <img src="./images/s4.png" alt="">
                </div>
                <div class="detail-box">
                    <h1>人脸特征分析</h1>
                    <p>
                        手写文字识别实验、印刷文字识别实验</br>
                        拍照速算识别实验、公式识别实验
                    </p>
                </div>
            </div>
        </div>
        <div class="right_module">
            <div class="right_box">
                <div class="img-box">
                    <img src="./images/s4.png" alt="">
                </div>
                <div class="detail-box">
                    <h1>人脸特征分析</h1>
                    <p>
                        手写文字识别实验、印刷文字识别实验</br>
                        拍照速算识别实验、公式识别实验
                    </p>
                </div>
            </div>
        </div>
        <div class="right_module">
            <div class="right_box">
                <div class="img-box">
                    <img src="./images/s4.png" alt="">
                </div>
                <div class="detail-box">
                    <h1>人脸特征分析</h1>
                    <p>
                        手写文字识别实验、印刷文字识别实验</br>
                        拍照速算识别实验、公式识别实验
                    </p>
                </div>
            </div>
        </div>
        <div class="right_module">
            <div class="right_box">
                <div class="img-box">
                    <img src="./images/s4.png" alt="">
                </div>
                <div class="detail-box">
                    <h1>人脸特征分析</h1>
                    <p>
                        手写文字识别实验、印刷文字识别实验</br>
                        拍照速算识别实验、公式识别实验
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>
<script src="js/jquery-2.1.0.min.js"></script>



<script type="text/javascript">
    function showMenu(){
        var issshow = document.getElementById("face_menu").style.display;
        if (issshow != ""){
            document.getElementById("face_menu").style.display = "";
        }else {
            document.getElementById("face_menu").style.display = "none";
        }
    }

    /*function quit(){
        window.location.href = 'http://localhost:8089/face_web_war_exploded/login.jsp';
    }*/
    // 菜单显示和隐藏
    // function showMenu() {
    //     // 内置文档对象  获取元素通过ID
    //     // display 用来控制元素显示还是隐藏。隐藏->display:none
    //     var isshow = document.getElementById("face_menu").style.display;
    //     if(isshow != ""){
    //         document.getElementById("face_menu").style.display = "";
    //     }else {
    //         document.getElementById("face_menu").style.display = "none";
    //     }
    // }
    // 使用jQuery框架来实现菜单显示和隐藏
    $(document).ready(function(){

        $("#test").click(function(){ // 给 id = test 的元素绑定一个点击事件
            if($("#face_menu").is(":hidden")){
                $("#face_menu").show(700);// 调用show 方法来显示div
            }else{
                $("#face_menu").hide(700); // 调用hide 方法来显示div
            }
        });


        var lis = $(".ppt ul li")
        //轮播图数量
        var spics = lis.length
        //按钮数量
        var sbtn = $(".select-dots div").length
        //前后按钮
        var sprev = $(".prev")
        var snext = $(".next")
        //轮播图长度
        var sul = $(".ppt ul").width()
        var swidth = $(".ppt").width()

        var sbox = $(".ppt ul").html()

        var index = 0

        if (spics != sbtn) {
            if (spics > sbtn) {
                var num = spics - sbtn
                for (var i = 0; i < num; i++) {
                    $(".select-dots").append("<div class='dot'><div>")
                }
                var dots = $(".select-dots>div").length
                for (var i = 0; i < dots; i++) {
                    $(".select-dots>div").eq(i).text(i + 1)
                }
            }

        }

        var timer = setInterval(function () {
            snext.trigger('click')
        }, 3000)


        //换图后按钮
        snext.click(function () {
            if ($(".ppt ul").is(":animated")) {
                return
            }
            index++

            var spic = lis.length
            if (index % spic == 0) {
                $(".ppt ul").append(sbox)

                var spic = $(".ppt ul li").length
                var newWidth = spic * swidth + 'px'
                $(".ppt ul").width(newWidth)
            }


            leftW = -swidth * index + 'px'
            $(".ppt ul").stop().animate({
                left: leftW
            }, 1000)

            var k = index % spics
            $(".dot").removeClass('red')
            $(".dot").eq(k).addClass('red')
        })
        //换图前按钮
        sprev.click(function () {
            index--
            index < 0 ? index = 0 : false
            leftW = -swidth * index
            $(".ppt ul").stop().animate({
                left: leftW
            }, 1000)
            var k = index % spics
            $(".dot").removeClass('red')
            $(".dot").eq(k).addClass('red')
        })
        //四个下标按钮
        $(".dot").click(function () {
            var num = $(this).index();
            $(".dot").removeClass('red')
            $(".dot").eq(num).addClass('red')
            index = index - index % spics + num
            //计算轮播图偏移
            leftW = -swidth * index
            $(".ppt ul").stop().animate({
                left: leftW
            }, 1000)
        })
        //切图计时器
        $(".ppt").hover(function () {
            clearInterval(timer)
        }, function () {
            timer = setInterval(function () {
                $(".next").trigger('click')
            }, 5000)
        })


    });
</script>
